<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>Universal Selector (*)</title>
<meta name="description" content="CSS3参考手册之: 通配选择符(*)" />
<meta name="keywords" content="通配选择符, css3选择符, css3, css3参考手册" />
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<meta name="robots" content="all" />
<!--[if lte IE 8]>
<script src="../../js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="../../skin/article.css" />
<link rel="stylesheet" href="../../bg.css" />
<style type="text/css" media="screen">
	#hd span{
		font-size: 25px;
		color:#0382ad;
		font-weight: 700;
		line-height: 26px;
	}
	
</style>
</head>
<body>
<nav id="guide" class="g-mod">
	<div class="from">
		<a href="http://css.doyoe.com/" target="_blank">CSS3参考手册</a>
		<span>&#187;</span>
		<a href="../index.htm">晗安笔记</a>
		<span>&#187;</span>
		<a href="index.htm" id="category" rel="hanan/css" name="display">晗安css</a>
		<span>&#187;</span>
	</div>
	<div class="to">
		<span class="label">相关内容：</span>
		<div class="g-combobox g-transition">
			<a href="?" class="g-transition target">
				<strong>其它元素选择符参考</strong>
				<span>选择其它项<!--[if lte IE 7]><ins>IE7 and earlier, Get to die</ins><![endif]--></span>
			</a>
			<div class="g-transition list">
				<ul>
					<!-- 插入分类快速导航 -->
				</ul>
			</div>
		</div>
	</div>
</nav>
<header id="hd">
<span>css行、块级元素间的转换</span>
<!-- 	<section id="title" class="g-mod">
		<h1 class="tit">标签</h1>
		<ul class="info">
			<li><strong>版本：CSS2</strong></li>
		</ul>
		插入浏览器信息
	</section> -->
</header>
<section id="bd">
	<section id="syntax" class="g-mod g-attr">
		<h2 class="tit">语法：</h2>
		<div class="cont">
		<!-- 在P标签内放标签语法代码 -->
			<p style="background: #272822;color:#ffffff">
				<span style="color: #f92672">display</span><span style="color: #a6e22e">:block</span><span style="color: #f92672">;</span>  <span style="color: #75715e">&nbsp;&nbsp;&nbsp;&nbsp;/*转成块级元素*/</span>  <span style="color: #f92672"><br /></span>
    <span style="color: #f92672">display</span><span style="color: #a6e22e">:inline</span><span style="color: #f92672">;</span>  <span style="color: #75715e">&nbsp;&nbsp;&nbsp;&nbsp;/*转成行级元素*/</span>  <span style="color: #f92672"><br /></span>
    <span style="color: #f92672">display</span><span style="color: #a6e22e">:inline-block</span><span style="color: #f92672">;</span>  <span style="color: #75715e">&nbsp;&nbsp;&nbsp;&nbsp;/*转成行内块级元素*/</span>  <span style="color: #f92672"><br /></span><span style="color: #f92672">display</span><span style="color: #a6e22e">:none</span><span style="color: #75715e">&nbsp;&nbsp;&nbsp;&nbsp;/*元素隐藏*/</span>
			</p>
		</div>
	</section>
	<section id="intro" class="g-mod g-attr">
		<h2 class="tit">说明：</h2>
		<div class="cont">
			<!-- <strong>选定所有对象。</strong> -->
			<ul>
				 <li>行级元素 :  1、不能设置宽高      2、能和其他元素呆在同一行  &nbsp;&nbsp;&nbsp;&nbsp;---&gt; 常见的行级元素：span a u em strong </li>
                <li>块级元素 ： 1、能设置宽高    2、霸占一行，不和其他元素呆在同一行   &nbsp;&nbsp;&nbsp;&nbsp;---&gt;  常见的块级元素：div p ul li h1-h6 </li>
                 <li>行内块级元素:   1、能设置宽高     2、能待在一行  &nbsp;&nbsp;&nbsp;&nbsp;---&gt;常见的行内块级元素：img 表单（input textarea神马的~）&nbsp;&nbsp;&nbsp;(有行级元素的特性同时也和块级元素一样可设置高)</li> 
                 <li>注：行内块级元素有水平间距的解决办法是：在其父级上设置：font-size:0</li>
			</ul>
		</div>
	</section>

	<section id="example" class="g-mod g-attr">
		<h2 class="tit">示例：</h2>
		<div class="cont">
		<!-- textarea标签内放运行的代码 -->
			<textarea cols="90" rows="20">
<html>
  <head>
      <style type="text/css">
    #title{
/*设置字体*/
     font-family:微软雅黑,宋体;
     width: 400px;
     height: 100px;
     border: 3px solid blue;

     text-align: center; /*水平位置*/

     line-height: 100px;/*行高*/

      font-weight: 400;/*文字粗细--400为细*/

     font-style: italic;/*文字倾斜*/

     /*文字划线--下划线：underline、上划线：overline、删除线：line-through*/
     text-decoration: line-through;
   }

p{
    width: 400px;
    border: 3px solid blue;
    font-size: 20px;

    line-height: 2em; /*行高：文字占用的高度 --2倍*/

    text-indent: 2em; /*首行缩进---2倍*/

    font-weight: 700; /*文字粗细--700为粗 400为细*/

    letter-spacing: 5px; /*字间距*/

}
  </style>
</head>
<body>
  <h1 id="title">后盾网 人人做后盾</h1>

<p>香港警方11日完成金钟及附近占领区的全面清场，</p>
</body>
</html>
			</textarea>
			<p><input type="button" value="运行" class="g-btn g-btn-sure" /></p>
		</div>
	</section>
</section>
<footer id="ft">
	<aside id="rights" class="g-mod">
		<!-- 插入浏览器及版权信息 -->
	</aside>
</footer>
<script src="../../js/jquery.js"></script>
<script src="../../js/inner.js"></script>
</body>
</html>